<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
    <link rel="stylesheet" href="/ftl/css/laypage.css">
    <script src="/ftl/js/vue/vue.min.js"></script>
    <script src="/ftl/js/jquery/jquery.min.js"></script>
    <script src="/ftl/js/laypage/laypage.js"></script>
    <script src="/ftl/js/layer/layer.js"></script>
</head>
<body>
<div id="app" class="container">
    <form class="form-inline" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="">用户名称</label>
            <input type="text" class="form-control" id="name" placeholder="用户名称">
        </div>
        <button type="button" id="findUser" class="btn btn-success">查询用户</button>
        <button type="button" id="addUser" class="btn btn-danger">新增用户</button>
    </form>
    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <td>用户</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>

                </td>
            </tbody>      <tr class="active" v-for="(item,index) in result">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <a href="#" @click="update(item.id)" >编辑</a>
                    <a href="#" @click="deleteUser(item.id)">删除</a>
            <tr>
                <td colspan="3">
                    <div id="pagenav"></div>
                </td>
            </tr>
        </table>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            result:[]
        }
    });
    var getUserPageList=function(curr){
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/getPage',
            data: {
                pageNum:curr||1,
                pageSize:5,
                name:$('#name').val()
            },
            success: function (msq) {
                app.result=msq.page;
                laypage({
                    cont: 'pagenav',
                    pages: msq.totalPage,
                    skin: '#DB7093',
                    first: '首页',
                    last: '尾页',
                   curr: curr||1,
                    groups: 3,
                    skip: true,
                    //触发分页之后的方法回调
                    jump: function(obj, first) {
                        if (!first) {
                            getUserPageList(obj.curr);
                        }  //11122
                    }
                });
            }
        });
    }
    getUserPageList();
    $("#findUser").click(function (){
        getUserPageList();
    });
$("#addUser").click(function (){
    layer.open({
        type: 2,
        title: '新增用户',
        fix: false,
        maxmin: true,
        shadeClose: true,
        area: ['1100px', '600px'],
        content: '/ftl/add.html',
        end: function () {
            getUserPageList();
        }
    });
});
var update=function (id){
    layer.open({
        type: 2,
        title: '编辑用户',
        fix: false,
        maxmin: true,
        shadeClose: true,
        area: ['1100px', '600px'],
        content:'/goupdate?id='+id,
        end: function () {
            getUserPageList();
        }
    });
};
var deleteUser=function (id){
    layer.confirm("你确定删除吗？",
    {
        btn:["是","否"]
    },function (){
        $.ajax({
            type:"get",
            dataType: "json",
            url: "/delete",
            data:{
                id:id
            },
            success(res){
                getUserPageList();
                layer.msg("删除成功"+id,{icon:5})
            }
        })
    },function () {
        //否

    })
}
    var deleteUser=function (id){
        layer.confirm("你确定删除吗？",
            {
                btn:["是","否"]
            },function (){
                $.ajax({
                    type:"get",
                    dataType: "json",
                    url: "/delete",
                    data:{
                        id:id
                    },
                    success(res){
                        getUserPageList();
                        layer.msg("删除成功"+id,{icon:5})
                    }
                })
            },function () {
                //否

            })
    }
</script>
</body>
</html>